<template>
    <div>
        <v-layout row wrap>
            <v-flex xs6>
                <v-btn round color="primary" dark>品牌添加</v-btn>
            </v-flex>
            <v-flex xs6>
                <v-text-field
                        label="搜索"
                        prepend-icon="search"
                        v-model="key"
                ></v-text-field>
            </v-flex>
        </v-layout>
        <v-data-table
                :headers="headers"
                :items="desserts"
                :pagination.sync="pagination"
                :total-items="totalDesserts"
                :loading="loading"
                class="elevation-1"
        >
            <!--
            遍历表数据
            slot="items" 指定要遍历的数据
            slot-scope="props" 给当前数据指定一个别名
            遍历的时候其中每一个对象的获取使用props.item
            -->
            <template slot="items" slot-scope="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.name }}</td>
                <td class="text-xs-center"><img :src=" props.item.image "></td>
                <td class="text-xs-center">{{ props.item.letter }}</td>
            </template>
        </v-data-table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                totalDesserts: 0, //总页数
                desserts: [],   //当前页记录
                loading: false,  //进度条
                pagination: {},  //分页
                headers: [    //标头
                    {text: '品牌id', align: 'center', value: 'id'},
                    {text: '品牌名称', align: 'center', value: 'name'},
                    {text: '品牌图片', align: 'center', sortable: false, value: 'image'},
                    {text: '品牌字母', align: 'center', value: 'letter'}
                ],
                key: '' //搜索用
            }
        }
        ,
        watch: {
            pagination: {
                deep: true,
                handler() {
                    this.loadBrandData();
                }

            },
            key: {
                handler() {
                    this.loadBrandData();
                }
            }
        },
        //钩子函数，页面加载完后执行
        mounted() {
            loadBrandData();
        }
        ,
        //自定义的方法都可以写在这里
        methods: {
            //f1请求当前页面的数据
            loadBrandData() {
                this.loading = true;
                this.$http.get("/item/brand/page", {
                    params: {
                        key: this.key,
                        page: this.pagination.page,
                        rows: this.pagination.rowsPerPage,
                        sortBy: this.pagination.sortBy,
                        desc: this.pagination.descending
                    }
                }).then(resp => { // 这里使用箭头函数
                    this.desserts = resp.data.items;
                    this.totalDesserts = resp.data.total;
                    // 完成赋值后，把加载状态赋值为false
                    this.loading = false;
                });
            }

        }

    }
</script>